<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" media="screen" href="<?php echo PUBLIC_URL . '/css/simpletip.css';?>">
<script type="text/javascript" src="<?php echo PUBLIC_URL . '/js/jquery.simpletip-1.3.1.min.js';?>"></script>
<title>Zend Framework</title>

<style type="text/css">
	.list-user {
	    border-collapse: collapse;
	    font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
	    width: 1000px;
	}
	.list-user tr.alt td {
	    background-color: #EAF2D3;
	    color: #000000;
	}
	.list-user td, .list-user  th {
	    border: 1px solid #98BF21;
	    font-size: 1.2em;
	    padding: 10px;
	    
	}
	.list-user th {
	    background-color: #A7C942;
	    color: #FFFFFF;
	    font-size: 1.4em;
	    padding-bottom: 4px;
	    padding-top: 5px;
	    text-align: center;
	}
	
	.index-title {
		margin: 20px 0px 10px 0px;;
		height: 150px;
	}
	
	.info-user{
		font-family: Arial,Helvetica,sans-serif;
		font-size: 1.4em;
		text-align: left;
		color: blue;
		width: 250px;
	}
	
	.info-user .info-title{
		text-align: center;
		margin: -10px -14px 0px;
		background-color: #33818C;
		padding: 5px;
		margin-bottom: 10px;
		color: yellow;
	}
	.info-user .info-row{
		margin-bottom: 4px;
	}
	
	
</style>
</head>

<script type="text/javascript">
	$(document).ready(function(){
		var idUser = 0;
		$(".area-show-username").hover(function(){
			idUser = $(this).attr('id');
		}).simpletip({ 
			onBeforeShow: function(){ 
				this.load('<?php echo $this->url(array('action'=>'load-info'))?>',{id : idUser}); 
			} 
		});
	});
</script>

<body>
	<center>
		<div class="index-title">
			<img class="logo" alt="SIMPLETIP" src="<?php echo PUBLIC_URL . '/images/simpletip.png'?>">
		</div>
		
		<div class="list-user">
			<table class="list-user">
				<tbody>
					<tr>
					  <th>No</th>
					  <th>USER NAME</th>
					  <th>EMAIL</th>
					  <th>REGISTER DATE</th>
					  <th>GROUP</th>
					</tr>
					<?php
					if(!empty($this->Items)){
						$i = 1;
						foreach ($this->Items as $key=>$value){
							$class = ''; 
							if($i%2 ==0) $class = 'class="alt"';?>
							<tr <?php echo $class;?>>
								<td align="center"><?php echo $i;?></td>
								<td id="<?php echo $value['id'];?>" class="area-show-username"><?php echo $value['user_name'];?></td>
								<td><?php echo $value['email'];?></td>
								<td align="center"><?php echo date('d-m-Y',strtotime($value['register_date']));?></td>
								<td align="center"><?php echo $value['group_name'];?></td>
							</tr><?php
							$i++;
						} 
					}
					?>	
				</tbody>
			</table>
		</div>
	</center>
</body>
</html>
